<template>
	<!-- 今日优选 -->
	<div class="today">
		<div class="title">
			<span>{{ data.name }}</span>
			<span class="lookmore" @click="toList">查看更多</span>
		</div>
		<div class="goods-list">
			<div class="left" @click="goDetail(first.id,first.iShopId)" :title="first.cProductShowName">
				<div class="img-box">
					<el-carousel height="25rem" indicator-position="outside">
						<el-carousel-item v-for="(item,index) in first.lsAlbums" :key="index">
							<div class="carousel-item">
								<img :src="item.cFolder">
							</div>
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="name">{{first.cProductShowName}}</div>
				<div class="desc">{{first.cTitleMemo}}</div>
				<div class="price">
					<span class="new">¥{{first.fSalePrice}}</span>
					<span class="old">¥{{first.pfMarkPrice}}</span>
				</div>
				<div class="btn">
					立即购买
				</div>
			</div>
			<div class="right">
				<div class="list-item" :title="item.cProductShowName"  @click="goDetail(item.pid,item.iShopId)" v-for="(item,index) in list" :key="item.pid" v-if="index<9&&index>0">
					<div class="img-box">
						<img :src="item.defaultAlbum" alt="">
					</div>
					<div class="name">{{item.cProductShowName}}</div>
					<div class="desc">{{item.cSellingPoint}}</div>
					<div class="price">
						<span class="new">¥{{item.fSalePrice}}</span>
						<span class="old">¥{{item.pfMarkPrice}}</span>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="more">
			<img src="../../assets/img/logo2.png" alt="" @click="toList">
		</div> -->
		<!-- <img src="../../assets/img/7@2x.png" alt="" class="adv" /> -->
	</div>
</template>

<script>
	export default {
		name: "",
		components: {},
		props: {
			data: {
				type: Object,
				// 对象或数组默认值必须从一个工厂函数获取
				default: function() {
					return {};
				},
			},
		},
		data() {
			return {
				list: [],
				first:{
					lsAlbums:[]
				}
			};
		},
		mounted() {
			let params = {
				queryCondition: {
					order: [{
						fieldname: "iOrder",
						direction: "asc",
					}, ],
					pageindex: 1,
					pagesize: 9,
					where: [{
						fieldname: "tag_id",
						valuefrom: this.data.connect_id,
					}, ],
				},
			};

			this.$api.home.getProductList(params).then((res) => {
				if (res.code == 200) {
					this.list = res.data.data;
					if(this.list.length>0){
						this.getData(this.list[0].pid,this.list[0].iShopId)
					}
					console.log("今日优选", this.list);
				}
			});
		},
		methods: {
			toList() {
				this.$router.push({
					path: "/today",
					query: {
						id: this.data.connect_id,
					},
				});
			},
			//跳转商品详情
			goDetail(id,iShopId) {
				this.$router.push({
					path: "/fruit/detail",
					query: {
						id: id,
						iShopId: iShopId
					},
				});
			},
			getData(id,iShopId){
				let params = {
					token: localStorage.getItem('token'),
					data: {
						id: id,
						iShopId: iShopId,
					}
				}
				this.$api.good.getGoodDetail(params).then(res => {
					this.first = res.data
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.today {
		padding: 0 10rem;
		margin-top: 8.56rem;
		display: flex;
		flex-direction: column;

		.title {
			width: 100%;
			height: 3.44rem;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			font-size: 3rem;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #333333;
			margin-bottom: 3.94rem;
			.lookmore{
				font-size: 1.13rem;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #999999;
				cursor: pointer;
			}
		}

		.goods-list {
			margin-top: 1.88rem;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 19rem;
				background: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 48.75rem;
				margin-right: 1%;
				cursor: pointer;
				.img-box {
					width: 90%;
					padding: 1.5rem 0;
					// margin: 0 auto;
					.carousel-item {
						width: 100%;
						height: 100%;

						img {
							width: 100%;
							height: 22.25rem;
						}
					}
				}
				.name{
					font-size: 1.81rem;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 18rem;
					text-align: center;
					line-height: 1.5;
				}
				.desc{
					font-size: 1.2rem;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #333333;
					opacity: 0.5;
					margin-top: 1.13rem;
					margin-bottom: 1.6rem;
					text-align: center;
				}
				.price{
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 2rem;
					.new{
						font-size: 1.5rem;
						font-family: SourceHanSansCN;
						font-weight: 400;
						color: #FF0000;
						margin-right: 0.94rem;
					}
					.old{
						font-size: 1.5rem;
						font-family: SourceHanSansCN;
						font-weight: 400;
						text-decoration: line-through;
						color: #000000;
						opacity: 0.4;
					}
					
				}
				.btn{
					width: 11.25rem;
					height: 3.13rem;
					background: #1BE0BA;
					box-shadow: 0rem 1rem 2rem 0rem rgba(27, 224, 186, 0.3);
					border-radius: 2rem;
					font-size: 1.25rem;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.right {
				flex: 1;
				display: flex;
				justify-content: flex-start;
				align-items: baseline;
				flex-wrap: wrap;
				height: 48.75rem;

				.list-item {
					height: 49.2%;
					background: #fff;
					width: 24%;
					margin-right: 1%;
					margin-bottom: 1%;
					display: flex;
					flex-direction: column;
					align-items: center;
					cursor: pointer;
					&:nth-child(4n) {
						margin-right: 0;
					}
					&:nth-child(4n+1) {
						margin-bottom: 0;
					}
					&:nth-child(4n+2) {
						margin-bottom: 0;
					}
					&:nth-child(4n+3) {
						margin-bottom: 0;
					}
					&:nth-child(8n) {
						margin-bottom: 0;
					}

					.img-box {
						padding: 1.31rem 2.38rem;

						img {
							width: 12.19rem;
							height: 12.19rem;
						}

					}
					.name{
						font-size: 1.25rem;
						font-family: SourceHanSansCN;
						font-weight: 400;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 18rem;
						text-align: center;
						line-height: 1.5;
					}
					.desc{
						font-size: 1rem;
						font-family: SourceHanSansCN;
						font-weight: 400;
						color: #333333;
						opacity: 0.5;
						margin-top: 1.13rem;
						margin-bottom: 1.6rem;
						text-align: center;
					}
					.price{
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 2rem;
						.new{
							font-size: 1.25rem;
							font-family: SourceHanSansCN;
							font-weight: 400;
							color: #FF0000;
							margin-right: 0.94rem;
						}
						.old{
							font-size: 1.25rem;
							font-family: SourceHanSansCN;
							font-weight: 400;
							text-decoration: line-through;
							color: #000000;
							opacity: 0.4;
						}
						
					}
				}
			}
		}

		.more {
			height: 2.5rem;
			background: rgba(0, 0, 0, 1);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 1.44rem;

			img {
				width: 7.38rem;
				cursor: pointer;
			}
		}

		.adv {
			width: 100%;
			margin-top: 3.69rem;
			object-fit: contain;
		}
	}
</style>
<style type="text/css" lang="scss">
	.el-carousel__indicator--horizontal{
		width: 0.55rem;
		height: 0.55rem;
		background: #000;
		opacity: 0.2;
		border-radius: 50%;
		padding: 0!important;
		opacity: 0.5;
		margin-right: 1rem;
		
		.el-carousel__button{
			width: 0.55rem;
			height: 0.55rem;
			background: #000;
			border-radius: 50%;
			opacity: 0.5;
		}
		
	}
	.is-active{
		.el-carousel__button{
			width: 0.55rem;
			height: 0.55rem;
			background: #1BE0BA;
			border-radius: 50%;
			opacity: 1;
		}
	}
</style>